<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!--<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>-->
    <script src="../../js/public/jquery-2.2.3.min.js"></script>
    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    <!--<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>-->
    <script src="https://img.hcharts.cn/highcharts/modules/data.js"></script>
    <!--<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>-->
    <title>家族数据</title>
    <style>
        body {
            margin: 0;
        }
        header {
            width: 100%;
            height: 50px;
            background-color: rgb(242,242,242);
            /*padding: 10px 0;*/
        }
        header .go-back {
            margin: 14px 10px;
            float: left;
            width: 25px;
        }
        header h4 {
            width: 90%;
            line-height: 50px;
            margin: 0;
            text-align: center;
        }
        .highcharts-credits {
            display: none;
        }
    </style>
</head>
<body>
<header>
    <a href="javascript:;" onclick="window.history.back()"><img src="../../images/back.png" class="go-back" alt=""/></a>
    <h4>每一代人数</h4>
</header>
<div id="container" style="width: 310px; height: 400px; margin: 0 auto"></div>
<table id="datatable" style="display: none">
    <thead>
    <tr>
        <th></th>
        <th>每一代人数</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>第一代</th>
        <td>20</td>     <!--字段：每一代人数，动态载入-->
    </tr>
    <tr>
        <th>第二代</th>
        <td>40</td>
    </tr>
    <tr>
        <th>第三代</th>
        <td>60</td>
    </tr>
    <tr>
        <th>第四代</th>
        <td>80</td>
    </tr>
    <tr>
        <th>第五代</th>
        <td>100</td>
    </tr>
    </tbody>
</table>
</body>
<script>
    $(function () {
        $('#container').highcharts({
            data: {
                table: 'datatable'
            },
            chart: {
                type: 'column'
            },
            title: {
                text: '每一代人数'
            },
            yAxis: {
                allowDecimals: false,
                title: {
                    text: '个',
                    rotation: 0
                }
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                            this.point.y + ' 个' + this.point.name.toLowerCase();
                }
            }
        });
    });

</script>
</html>